<script lang="ts" setup>
import { ref } from "vue";
import {toast} from "../../components/popup/popup"
import { goHome,goNews } from "../../tools/go";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {getNews} from "../../api/home/home"
import {baseUrl} from "../../api/http";

const isRefreshing = ref(false);

const newsList = ref([
  {
    title: "2025年全国两会即将召开，代表委员陆续抵京",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/84e3cfbda09c914f98979736d5156ae4.jpg",
    source: "人民日报",
    time: "10分钟前",
  },
  {
    title: "我国首个海上浮动式光伏电站并网发电成功",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/cc72327f45c7079a398db0ed42dce1a4.jpg",
    source: "新华社",
    time: "30分钟前",
  },
  {
    title: "第五届数字中国建设峰会在福州开幕",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/b9429ed77ccc6a1dfea162cea6c4a5e2.jpg",
    source: "中国新闻网",
    time: "1小时前",
  },
  {
    title: "2025年春季农产品价格整体趋稳",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/2b7d6eb27e3128a8f8d145b5a9ee4da7.jpg",
    source: "经济日报",
    time: "2小时前",
  },
  {
    title: "全国首个量子计算产业园在合肥启动建设",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/7383135ba5da17044a90d2b12f0daf21.jpg",
    source: "科技日报",
    time: "3小时前",
  },
  {
    title: "2025年春运今日启动 预计发送旅客量创新高",
    imageUrl:
        "https://public.readdy.ai/ai/img_res/a172733cb60a54b11a269d5af5a1ee20.jpg",
    source: "交通时报",
    time: "4小时前",
  },
]);


const goToDetail = (item: any) => {
  toast(`正在查看: ${item.newsId}`,"none")
  goNews(item.newsId)
};

const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
    toast("刷新成功","success")
  }, 1000);
};

const NewsPage = {
  page: 1,
  size: 10
}


const News = () => {
  getNews(NewsPage.page, NewsPage.size).then(res => {
    console.log(res)
    newsList.value = res.data.records
  })
}

const init = () => {
  News()
}

init()
</script>

<template>
  <view class="back">
    <view class="news-container">
      <!-- 顶部导航栏 -->
      <view class="nav-bar">
        <uni-icons @click="goHome()" type="left" size="20" class="back-icon" />
        <text class="nav-title">新闻列表</text>
      </view>

      <!-- 新闻列表区域 -->
      <scroll-view
          class="news-list"
          scroll-y
          @refresherrefresh="onRefresh"
      >
        <view
            v-for="(item, index) in newsList"
            :key="index"
            class="news-item"
            @click="goToDetail(item)"
        >
          <view class="news-content">
            <text class="news-title">{{ item["newsTitle"] }}</text>
            <image class="news-image" :src="baseUrl + item['newsImg']" mode="aspectFill" />
          </view>
          <view class="news-info">
            <text class="news-time">{{ item.newsPublicTime }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>



<style scoped lang="scss">
@use "../../static/css/main";
.back{
  @include main.useTheme() {
    page {
      height: 100%;
    }

    .news-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      background: main.getVal('primary_bg_color');
    }

    .nav-bar {
      display: flex;
      align-items: center;
      height: 88rpx;
      background-color: main.getVal('one_lv_bg_color');
      padding: 0 30rpx;
      position: relative;
      flex-shrink: 0;
    }

    .back-icon {
      color: rgb(51, 51, 51);
    font-size: 20px;
    margin-top: -12px;
      width: 20px;
      height: 20px;
    }

    .nav-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 16px;
      font-weight: 500;
      color: main.getVal('primary_text_color');
    }

    .news-list {
      flex: 1;
      overflow: auto;
      width: 95%;
      margin: 0 auto;
    }

    .news-item {
      background-color: main.getVal('two_lv_bg_color');
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }

    .news-content {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }

    .news-title {
      flex: 1;
      font-size: 16px;
      color: main.getVal('primary_text_color');
      line-height: 1.4;
      margin-right: 20rpx;
    }

    .news-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      flex-shrink: 0;
    }

    .news-info {
      display: flex;
      align-items: center;
    }

    .news-source {
      font-size: 12px;
      color: main.getVal('two_lv_text_color');
      margin-right: 20rpx;
    }

    .news-time {
      font-size: 12px;
      color: main.getVal('two_lv_text_color');
    }
  }}

</style>
